<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="差异账单详情" width="700px">
    <MyAlert type="info" closable>
      <template #description>
        <span v-for="(item, index) in message" :key="index"> {{ item }} <br/></span>
      </template>
    </MyAlert>
    <Description :column="2" :bordered="false" :data="detailData" @register="registerDescription" />
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, useAttrs } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { formDetailSchema } from './data';
import { Description, useDescription } from '/@/components/Description/index';
import MyAlert from '/@/components/My/MyAlert.vue';
import { getCheckDiff } from './api';
const emit = defineEmits(['register']);
const attrs = useAttrs();
const detailData = ref({});
const message = [
  "系统会把3天内的本地多账和渠道多账标记为挂账状态，会自动处理隔日订单的情况。",
]
const [registerDescription] = useDescription({
  schema: formDetailSchema,
  labelStyle: {
    marginLeft: '10px',
  }
});

const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  setDrawerProps({confirmLoading: false, loading: true})
  try {
    detailData.value = await getCheckDiff({id: data.record.id})
  } finally {
    setDrawerProps({ loading: false })
  }
});
</script>
